<template>
	<div>
		<el-container>
			<el-header style="margin-top: 56px;">
				<h4>我的订单详情</h4>
				<div class="box-left">
					<el-switch v-model="choose" active-text="已付款" inactive-text="未付款" active-color="#13ce66" inactive-color="#ff4949">
					</el-switch>
					<el-date-picker v-model="date1" type="date" placeholder="订单起始时间">
					</el-date-picker>
					<el-date-picker v-model="date2" type="date" placeholder="订单结束时间"> </el-date-picker>
					<el-button type="primary" @click="find()">查询</el-button>
				</div>
			</el-header>
		</el-container>
		<el-container>
			<el-main>
				<el-table :data="findlist">
					<el-table-column label="订单号" prop="ordid"></el-table-column>
					<el-table-column label="收获地址" prop="addr"></el-table-column>
					<el-table-column label="电话" prop="phone"></el-table-column>
					<el-table-column label="发货单号"></el-table-column>
					<el-table-column label="总价" prop="amount"></el-table-column>
					<el-table-column label="是否付款" prop="ispay">
						<template #default="scope">
							{{filterpay(scope.row)}}
						</template>
					</el-table-column>
					<el-table-column label="下单时间" prop="tcreate">
						<template #default="scope">
							{{filterdate(scope.row)}}
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template #default="scope">
							<el-popover trigger="click" placement="left" width="600px">
								<p>订单号：{{scope.row.ordid}}</p>
								<el-table :data="newlist">
									<el-table-column label="图片" width="200px">
										<template #default="scope">
											<img :src="`${$Imgurl}/showImg/${scope.row.picture}`">
										</template>
									</el-table-column>
									<el-table-column label="商品名称" prop="name"></el-table-column>
									<el-table-column label="商品价钱" prop="price"></el-table-column>
									<el-table-column label="商品数量" prop="num"></el-table-column>
									<el-table-column label="小计">
										<template #default="scope">
											{{scope.row.price*scope.row.num}}
										</template>
									</el-table-column>
								</el-table>
								<template #reference>
									<el-button @click="gomore(scope.row)">明细</el-button>
								</template>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
				<p style="text-align: center;">
					<el-button type="primary" @click="btn()">显示更多</el-button>
				</p>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import instance from '../../../ajax/index.js'
	export default {
		name: 'Order',
		data() {
			return {
				choose: true,
				date1: '2021-12-30',
				date2: '2022-12-31',
				list: [],
				newlist: [],
				page: 0,
				findlist: [],
				total: 0,
				ord: {}
			}
		},
		methods: {
			gomore(val) {
				instance.get('/api/adm/ord/findItemInfoByOrdid/' + val.ordid).then((res) => {
					this.newlist = res.data.data
				}).catch((error) => {
					console.log(error);
				})
			},
			btn() {
				this.page++
				if (this.page * 5 > this.list.length) {
					this.$message.error({
						message: "已经到底啦",
						offset: 80
					})
					return
				}
				instance.get('/api/fore/ord/findOrdLineByPage/' + this.page + '/5').then((res) => {
					for (let i in res.data.data.orders) {
						this.list.push(res.data.data.orders[i])
					}
				}).catch((error) => {})
			},
			find() {
				this.findlist=[]
				if(this.choose){
					for(let i in this.list){
						if(this.list[i].ispay==1 && this.list[i].tcreate <= new Date(this.date2).getTime() && this.list[i].tcreate>= new Date(this.date1).getTime()){
							this.findlist.push(this.list[i])
						}
					}
				}else{
					for(let i in this.list){
						if(this.list[i].ispay==0 && this.list[i].tcreate <= new Date(this.date2).getTime() && this.list[i].tcreate>= new Date(this.date1).getTime()){
							this.findlist.push(this.list[i])
						}
					}
				}
			}
		},
		computed: {
			filterpay() {
				return (val) => {
					return Number(val.ispay) == 0 ? "未付款" : '已付款'
				}
			},
			filterdate() {
				return (val) => {
					let date = new Date(val.tcreate)
					let y = date.getFullYear()
					let d = date.getMonth() + 1
					let m = date.getDate()
					return `${y}-${d}-${m}`
				}
			}
		},
		created() {
			instance.get('/api/fore/ord/findOrdLineByPage/0/5').then((res) => {
				this.list = res.data.data.orders
				this.findlist=this.list
				this.total = res.data.data.total
				// this.btn()
			}).catch((error) => {
				console.log(error);
			})
		}


	}
</script>

<style scoped>
	h4 {
		float: left;
		width: 30%;
		height: 60px;
		font-weight: bold;
		font-size: 20px;
		line-height: 60px;
	}

	.el-switch {
		margin-right: 15px;
	}

	.box-left {
		width: 50%;
		float: right;
	}

	img {
		height: 100px;
	}

	.el-button {
		margin-left: 15px;
		margin-top: 15px;
	}
</style>
